<template>
    <div>
        <!-- 抽离左侧侧边栏 -->
        <el-aside width="200px">
            <el-row>
                <el-col :span="12">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        :default-active="defaultActive" text-color="#fff" :router="true" :unique-opened="true">
                        <el-menu-item index="/home">
                            <el-icon>
                                <Menu />
                            </el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-sub-menu :index="item.id.toString()" v-for="item in store.getters['menu/getMenuList']" :key="item.id">
                            <template #title>
                                <el-icon>
                                    <!-- 动态渲染组件  使用component  用哪个is属性注册要渲染的组件 -->
                                    <component :is="item.icon"></component>  
                                </el-icon>
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item :index="item1.url" v-for="item1 in item.children">{{ item1.title }}</el-menu-item>                              
                            </el-menu-item-group>
                        </el-sub-menu>            
                    </el-menu>
                </el-col>
            </el-row>
        </el-aside>
    </div>
</template>
<script lang="ts" setup>
// 引入路由
import {useRoute} from 'vue-router';
import { useStore } from 'vuex';
let store = useStore();

// 获取仓库中的列表
store.dispatch('menu/getMenulistActions');

// 默认选中的路由
let route = useRoute();
// 将路由地址作为默认选中
const defaultActive = route.path;

</script>
<style scoped lang="less">
.el-aside {
    height: 100%;
    // height: 600px;
}

.el-menu {
    width: 200px;
    height: 100%;
    // height: 600px;

}
.el-row{
    height: 100%;
}
.el-col-12 {
    width: 200px;
    max-width: 200px;
}
</style>
